<template>
  <div>
    <van-form @failed="onFailed" @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          label="城市"
          v-model="state.form.city"
          placeholder="请输入城市"
        />

        <van-field
          label="出生日期"
          v-model="state.form.birthday"
          placeholder="请选择出生日期"
          is-link
          readonly
          @click="showBirthdayPicker = true"
        />
        <van-popup v-model:show="showBirthdayPicker" position="bottom">
          <van-date-picker
            @confirm="onBirthdayConfirm"
            @cancel="showBirthdayPicker = false"
          />
        </van-popup>
        <van-field
          label="身高（cm）"
          v-model="state.form.height"
          placeholder="请输入身高（cm）"
          type="number"
        />
        <van-field
          label="体重（kg）"
          v-model="state.form.weight"
          placeholder="请输入体重"
          type="number"
        />
        <van-field
          label="出生地"
          v-model="state.form.birthplace"
          placeholder="请输入出生地"
        />
        <van-field
          label="最爱的颜色"
          v-model="state.form.loveColor"
          placeholder="请输入最爱的颜色"
        />
        <van-field
          label="最爱的人"
          v-model="state.form.lovePeople"
          placeholder="请输入最爱的人"
        />
        <van-field
          label="最爱的食物"
          v-model="state.form.loveFood"
          placeholder="请输入最爱的食物"
        />
        <van-field
          label="爱好"
          v-model="state.form.hobby"
          placeholder="请输入爱好"
        />
        <van-field
          label="最爱的动物"
          v-model="state.form.loveAnimals"
          placeholder="请输入最爱的动物"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { closeToast, showLoadingToast, showSuccessToast } from "vant";
import { EditUserInfo } from "@/service/user";

const state = reactive({
  form: {
    city: "", //城市
    birthday: "", //		出生日期
    height: "", //	身高（cm）
    weight: "", //		体重
    birthplace: "", //		出生地
    loveColor: "", //		最爱的颜色
    lovePeople: "", //		最爱的人
    loveFood: "", //		最爱的食物
    hobby: "", //		爱好
    loveAnimals: "", //		最爱的动物
  },
});

const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
const onSubmit = (values) => {
  const { status } = EditUserInfo(state.form);
  if (status == 0) {
    showSuccessToast("修改成功");
  }
};

const showBirthdayPicker = ref(false);

const onBirthdayConfirm = ({ selectedValues }) => {
  state.form.birthday = selectedValues.join("-");
  showBirthdayPicker.value = false;
};
</script>

<style lang="less" scoped></style>
